<div id="panel-button" class="row">
	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-body text-right">
				{{Form::button(trans('form.back'), array('class' => 'btn btn-default', 'id' => 'cancel'))}}
			</div>
		</div>
	</div>
</div>

<div id="panel-button-fixed" class="row hidden">
	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-body text-right">
				{{Form::button(trans('form.back'), array('class' => 'btn btn-default', 'id' => 'cancel'))}}
			</div>
		</div>
	</div>
</div>

<div id="panel-error" class="row hidden">
	<div class="col-md-12">
		<div class="panel panel-default">
			<div id="error-content" class="panel-body"></div>
		</div>
	</div>
</div>

<div class='row'>
	<div class='col-md-6'>
		<div class="panel panel-default">
			<header class="panel-heading">{{ trans('product.current_product') }}</header>
			<div class="panel-body">
				{{Form::text('filter', '', array('placeholder' => trans('form.filter'), 'class' => 'form-control', 'id' => 'filter'))}}
			</div>
			<div class="panel-body">
				<table class="table table-striped footable" data-filter="#filter" data-page-size="10" data-filter-minimum="1">
					<tbody>
						@foreach($products as $row)
						<tr data-include="{{$row->id}}">
							<td>{{HTML::link('admin/product/edit/' . $row->id, $row->name)}}</td>
							<td>{{$row->net}}</td>
							<td>{{$row->brand}}</td>
							<td>{{Form::button(trans('form.add'), array('data-include' => $row->id, 'data-product' => $product->id, 'id' => 'add', 'class' => 'btn  btn-xs btn-success'))}}</td>
						</tr>
						@endforeach
					</tbody>
					<tfoot>
						<tr>
							<td colspan="5" class="text-right">
								<ul class="pagination pagination-sm"></ul>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>

	<div class='col-md-6'>
		<div class="panel panel-default">
			<header class="panel-heading">{{ trans('product.selected_product') }}</header>
			<div class="panel-body">
				{{Form::open(array('method' => 'post', 'id' => 'selected_products_form'))}}
				<table id="selected_products" class="table table-striped">
					<tbody>
						
					</tbody>
					<tfoot>
						<tr>
							<td colspan="9">
								<ul class="pagination pagination-sm"></ul>
							</td>
						</tr>
					</tfoot>
				</table>
				@if(isset($product->id))
				{{Form::hidden('product', $product->id)}}
				@endif
				{{Form::close()}}
			</div>
		</div>
	</div>
</div>

<script>
$(document).ready(function(){
	function appendProduct(product){
		var html = '<tr id="' + product.id + '">';

		html += '<td>';
		html += product.name;
		html += '</td>';

		html += '<td>';
		html += product.net;
		html += '</td>';

		html += '<td>';
		html += product.brand;
		html += '</td>';

		html += '<td style="width: 135px;">';
		html += '<input id="quantity" type="text" class="form-control" value="' + product.quantity + '" data-id="' + product.id + '" />';
		html += '</td>';

		html += '<td>';
		html += '<span id="delete" data-id="' + product.id + '" class="typcn typcn-delete text-red"></span>';
		html += '</td>';

		html += '</tr>';

		$("table#selected_products tbody").append(html);
	}

	function loadSelectedProducts(){
		$.ajax({
			url: '{{URL::to('admin/product-include/get')}}',
			type: 'post',
			data: {'product': {{$product->id}}},
			beforeSend: ajaxLoading(),
			success: function(result) {
				var rs = $.parseJSON(result);

				if(rs.error == true){
					appendErrorMessages(rs.message);
				}else{
					$("table#selected_products tbody").empty();

					$.each(rs.data, function(index, val) {
						appendProduct(val);
					});
				}

				ajaxLoadSuccess();
			}
		});
	}

	loadSelectedProducts();

	$("button#add").click(function(event) {
		/* Act on the event */
		var include = $(this).attr('data-include');
		var product = $(this).attr('data-product');

		$.ajax({
			url: '{{URL::to('admin/product-include/add')}}',
			type: 'post',
			data: {'include': include, 'product' : product, 'quantity': 0},
			beforeSend: ajaxLoading(),
			success: function(result){
				var obj = $.parseJSON(result);

				if(obj.error == true){
					appendErrorMessages(obj.message);
				}else{
					$("tr[data-include='" + include + "']").addClass('hidden');

					loadSelectedProducts();
				}

				ajaxLoadSuccess();
			}
		});
		
	});

	$("body").on('click', 'span#delete', function(event) {
		var id = $(this).attr('data-id');

		$.ajax({
			url: '{{URL::to('admin/product-include/delete')}}',
			type: 'post',
			data: {'id': id},
			beforeSend: ajaxLoading(),
			success: function(result){
				var rs = $.parseJSON(result);

				if(rs.error == true){
					appendErrorMessages(rs.message);
				}else{
					window.location.reload();
				}

				ajaxLoadSuccess();
			}
		});
		
	});

	$("body").on('change', 'input#quantity', function(event) {
		var quantity = $(this).val();
		var id = $(this).attr('data-id');

		deleteErrorMessages();

		$.ajax({
			url: '{{URL::to('admin/product-include/change-quantity')}}',
			type: 'post',
			data: {'id': id, 'quantity': quantity},
			beforeSend: ajaxLoading(),
			success: function(result){
				var rs = $.parseJSON(result);

				if(rs.error == true){
					appendErrorMessages(rs.message);
				}

				ajaxLoadSuccess();
			}
		});
		
	});

	$("button#cancel").click(function(){
		var url = "{{URL::to('/admin/product/')}}";

		window.location = url;
	});
});
</script>
<style type="text/css">
tr#new_selected_product{
	cursor: pointer;
}

tr:hover > td, tr:hover > td a{
	font-weight: normal !important;
}

span#delete{
	font-size: 16pt;
}
</style>